import React from "react";
import PropTypes from "prop-types";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { Row, Col, Button, Form, Select, Input, DatePicker, Modal } from "antd";
import { formatDate } from "utils";
import moment from "moment";

const dateFormat = "YYYY-MM-DD";
const { RangePicker, MonthPicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
};
const ReturnModal = ({
  form: { validateFields, getFieldsValue, getFieldDecorator },
  currentItem,
  onOk,
  userList,
  ...modalProps
}) => {
  const {
    id,
    documentId,
    borrowEndTime,
    borrowStartTime,
    borrowUserName,
    borrowId
  } = currentItem;
  const handleSubmit = e => {
    validateFields((err, values) => {
      if (!err) {
        const params = {
          id: borrowId,
          documentId: id,
          returnUserId: values["returnUserId"] || "",
          returnAt: `${formatDate(values["returnAt"])} 00:00:00`,
          returnUserId: values["returnUserId"] || "",
          effect: values["effect"] || ""
        };
        onOk(params);
      }
    });
  };
  const props = {
    onOk: handleSubmit,
    ...modalProps
  };
  const childre = (userList || []).map((item, i) => (
    <Option key={item.userId} value={String(item.userId)}>
      {item.username}
    </Option>
  ));
  return (
    <Modal {...props}>
      <Form>
        <FormItem {...formItemLayout} label="借阅时间">
          {getFieldDecorator("range-picker", {
            initialValue: [
              moment(formatDate(borrowStartTime), dateFormat),
              moment(formatDate(borrowEndTime), dateFormat)
            ]
          })(<RangePicker style={{ width: "100%" }} />)}
        </FormItem>
        <FormItem {...formItemLayout} label="借阅人">
          {getFieldDecorator("borrowUserName", {
            initialValue: borrowUserName
          })(<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="归还时间">
          {getFieldDecorator("returnAt",{
            rules: [
              {
                required: true,
                message: "请选择归还时间"
              }
            ]
          })(
            <DatePicker style={{ width: "100%" }} />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="归还人">
          {getFieldDecorator("returnUserId", {
            rules: [
              {
                required: true,
                message: "请选择归还人"
              }
            ]
          })(<Select style={{ width: "100%" }}>{childre}</Select>)}
        </FormItem>
        <FormItem {...formItemLayout} label="利用效果">
          {getFieldDecorator("effect")(<TextArea rows={4} />)}
        </FormItem>
      </Form>
    </Modal>
  );
};

ReturnModal.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object
};

export default Form.create()(ReturnModal);
